<template>
  <t-dropdown :options="options">
    <t-button theme="default" variant="text">
      <t-icon name="ellipsis" size="16" />
    </t-button>
  </t-dropdown>
</template>

<script setup lang="ts">
import { ITask, TASK_STATUS } from "@/models/task";
import { computed } from "vue";

const props = withDefaults(
  defineProps<{
    task: ITask;
    status: TASK_STATUS;
  }>(),
  {
    task: () => ({}),
  }
);

const emit = defineEmits<{
  (event: "waiting", task: ITask): void;
  (event: "pending", task: ITask): void;
  (event: "complete", task: ITask): void;
  (event: "cancel", id: ITask): void;
  (event: "detail", task: ITask): void;
  (event: "delete", task: ITask): void;
  (event: "clear", id: string): void;
}>();

// 更多操作配置项
const options = computed(() => {
  const watingOptions = {
    content: "待办",
    value: TASK_STATUS.WAITING,
    onClick: () => {
      emit("waiting", props.task);
    },
  };

  const pendingOption = {
    content: "处理",
    value: TASK_STATUS.PENDING,
    onClick: () => {
      emit("pending", props.task);
    },
  };

  const completeOptions = {
    content: "完成",
    value: TASK_STATUS.FINISHED,
    onClick: () => {
      emit("complete", props.task);
    },
  };

  const cancelOptions = {
    content: "取消",
    value: TASK_STATUS.CANCELED,
    onClick: () => {
      emit("cancel", props.task);
    },
  };

  const detailOptions = {
    content: "详情",
    value: 1,
    onClick: () => {
      emit("detail", props.task);
    },
    divider: TASK_STATUS.DELETED === props.status ? false : true,
  };

  const deleteOptions = {
    content: "删除",
    value: TASK_STATUS.DELETED,
    onClick: () => {
      emit("delete", props.task);
    },
  };

  const optionsArr = [
    watingOptions,
    pendingOption,
    completeOptions,
    cancelOptions,
    detailOptions,
    deleteOptions,
  ];

  const clearOptions = {
    content: "彻底删除",
    value: 2,
    onClick: () => {
      emit("clear", props.task.id);
    },
  };

  // 已删除情况添加清除功能
  if (props.status === TASK_STATUS.DELETED) {
    optionsArr.push(clearOptions);
  }

  return optionsArr.filter((ele) => ele.value !== props.status);
});
</script>

<style scoped>
</style>